<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <ul>
        <li>ListItem0</li>
        <li>ListItem1</li>
        <li>ListItem2</li>
        <li>ListItem3</li>
        <li>ListItem4</li>
        <li>ListItem5</li>
    </ul>

    <script>

        var listItems = document.querySelectorAll('li');

        // 需求：点击 li 元素时，输出其对应的索引

        // 方案一：
        /*  
        for (var i = 0, len = listItems.length; i < len; i++) {
             // 通过为 li 元素添加自定义属性，用来记录 i 的值
             listItems[i].index = i;
             listItems[i].onclick = function () {
                 console.log(this.index)
             };
         } */

        //  方案二：
        // for (let i = 0, len = listItems.length; i < len; i++) {
        //     // 建立 i 的副本
        //     // let i = i;

        //     listItems[i].onclick = function () {
        //         console.log(i)
        //     };
        // }

        // 副本      for的 i = 0
        // let i  =   i           i++ -> 1
        // let i  =   i          i++ -> 2

        // 方案三：
        // 使用闭合函数引用每次循环时，传入的实参
        // for (var i = 0, len = listItems.length; i < len; i++) {
        //     listItems[i].onclick = (function (index) {

        //         return function () {
        //             console.log(index)
        //         };

        //     })(i);
        // }


       /*  function foo () {

            var a = 12;

            function bar () {
                return a;
            }

            return bar;
        }

        var onclick = foo(2);

        console.log(onclick())
        console.log(onclick())
        console.log(onclick())

        // onclick = null;

        // onclick --> 内函数 bar --> 外函数的变量 a */





        


    </script>
</body>

</html>